<html>
<head>
<title>Taphandle V0.6</title>
<LINK REL="icon" HREF="images/tap16.png" TYPE="images/png" />
<LINK REL="SHORTCUT ICON" HREF="images/saada.ico" />

<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/form.css" />
<link rel="stylesheet" type="text/css" href="styleimport/datatable.css" />
<link rel="stylesheet" type="text/css" href="styles/simplemodal.css" />
<link rel="stylesheet" type="text/css" href="styleimport/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="styleimport/jquery.alerts.css" />

<script type="text/javascript" language="javascript" src="jsimport/jquery.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.mouse.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.draggable.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.droppable.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.sortable.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.tabs.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.jstree.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/splitter.js"></script>
<script type="text/javascript" language="javascript" src="jsimport/jquery.jsonSuggest-2.js"></script> 
<script type="text/javascript" language="javascript" src="jsimport/jquery.simplemodal.js"></script> 
<script type="text/javascript" language="javascript" src="jsimport/jquery.alerts.js"></script> 
<script type="text/javascript" language="javascript" src="jsimport/jquery.jsonSuggest-2.js"></script> 
<script type="text/javascript" language="javascript" src="jsimport/jquery.jeditable.js"></script> 
<script type="text/javascript" language="javascript" src="jsimport/json2.js"></script>

<script type="text/javascript" language="javascript" src="javascript/websampconnector.js"></script>

<script type="text/javascript" language="javascript" src="javascript/formator.js"></script>
<script type="text/javascript" language="javascript" src="javascript/resultPaneModel.js"></script>
<script type="text/javascript" language="javascript" src="javascript/resultPaneView.js"></script>
<script type="text/javascript" language="javascript" src="javascript/resultPaneControler.js"></script>
<script type="text/javascript" language="javascript" src="javascript/kwconstraintModel.js"></script>
<script type="text/javascript" language="javascript" src="javascript/kwconstraintView.js"></script>
<script type="text/javascript" language="javascript" src="javascript/kwconstraintControler.js"></script>
<script type="text/javascript" language="javascript" src="javascript/tapModel.js"></script>
<script type="text/javascript" language="javascript" src="javascript/tapView.js"></script>
<script type="text/javascript" language="javascript" src="javascript/tapControler.js"></script>
<script type="text/javascript" language="javascript" src="javascript/sampModel.js"></script>
<script type="text/javascript" language="javascript" src="javascript/sampView.js"></script>
<script type="text/javascript" language="javascript" src="javascript/sampControler.js"></script>
<script type="text/javascript" language="javascript" src="javascript/jobModel.js"></script>
<script type="text/javascript" language="javascript" src="javascript/jobView.js"></script>
<script type="text/javascript" language="javascript" src="javascript/jobControler.js"></script>
<script type="text/javascript" language="javascript" src="javascript/jobDictionnary.js"></script>
<script type="text/javascript" language="javascript" src="javascript/cartView.js"></script>
<script type="text/javascript" language="javascript" src="javascript/cartControler.js"></script>
<script type="text/javascript" language="javascript" src="javascript/cartModel.js"></script>
<script type="text/javascript" language="javascript" src="javascript/zipjobModel.js"></script>
<script type="text/javascript" src="javascript/ready.js"></script>
<script type="text/javascript" src="javascript/resize.js"></script>

</head>
<body>
<div id=superwrapper>
	<div id=banner class="levelonediv">
		&nbsp;<a href="http://code.google.com/p/tap-handles/" title="Taphandle project page" target="_blank" class=logo></a> &nbsp;&nbsp;
		<div id=pagetitle style='width: 100%'><span class=pagetitle>TAPHandle</span>
			<input type=text title="Enter a URL or a nickname of a TAP service. A suggestion list appears once one character has been typed"
			id=node_selector class=inputvalue style="font-size: small;font-family: courier; width: 300; position: relative; bottom: 5;" >
			<span class=help>Node Selector</span>
		
			<div id=externaltools style='position: relative;'> 
				<a href="javascript:void(0);" class="formexpender" title="Expand query form" 
				onclick='resultPaneView.fireExpendForm();' id='formexpender'></a>
		
				<a href="javascript:void(0);" id=showquerymeta title='Show Metadata' class=question></a>
	<!-- 		<a href="javascript:void(0);"  title='Download the current selection in a FITS file' -->
	<!-- 		class=fits onclick='resultPaneView.fireDownloadFITS();'></a>  -->
				<a href="javascript:void(0);" title='Download the results of the current job in a VOTable'
				class=votable onclick='resultPaneView.fireDownloadVOTable();'></a> 		
				<a href="javascript:void(0);" title='Open the shopping cart'
				class=zip onclick='cartView.fireOpenCart();' id=zipbutton></a> 		
	<!--		<a href="javascript:void(0);" class=topcat></a> -->
	<!--		<a href="javascript:void(0);" class=aladin></a> -->
	<!--		<a href="javascript:void(0);" class=ivoa></a> -->
				<a href="javascript:void(0);" title='Connect a SAMP hub. (The SAMP hub must be started first e.g. by starting Aladin)' 
				class=samp id=sampconnector ></a> 
				<a href="javascript:void(0);" title='Send the data selection to SAMP clients' 
				class=ivoa  style='visibility: hidden;'></a>
				<span class=pagetitlepath id=titlepath></span>
			</div>
			
		</div>
	</div>
	
	<div id="accesspane" class="levelonediv">
		<div id="datapane">
			<div id="treepane" style="border-style: hidden;">
				<div style="border-style: hidden; vertical-align: middle;">
					<span class=help title='Select TAP nodes with the node selector on the top of the page'>Tap Nodes</span>
				</div>
				<div id="treedisp"></div>
			</div>
			<div id="resultpane">
				<h3 class=help>&nbsp;Welcome to Taphandle</h3>
				<ul>
					<li class=help style="font-size: large;">Select first the TAP services you want to connect with in the <b>Node Selector</b> above.</li>
					<li class=help style="font-size: large;">Yo can either give a URL or a service nickname (the selector will help you).</li>
				</ul>
				<h3 class=help>&nbsp;Then access data by dropping any table node on one active area:</h3>
				<ul>
					<li class=help style="font-size: large;"><b>Here</b> to display the content of the table</li>
					<li class=help style="font-size: large;">On the <b>query area below</b> to setup a query on that table</li>
					<li class=help style="font-size: large;">On the <b>Meta</b> icon to display a description of the columns of the table.</li>
				</ul>
			</div>
		</div>
		<div id=formframe>
			<div id=formpanemenu style="float: left; text-align: center ;width: 91; border-style: hidden;">
				<div style="text-align: center ;padding: 5px; border-style: hidden;">
					<a href="javascript:void(0);" class=accept id=submitquery title='Execute the query as shown in the "plain text query" tab'></a><hr>
				</div> 
				<div style="text-align: left ;padding: 5px; text-align: center; border-style: hidden; ">
					<span class=help>Result Limit</span><br>
					<input type=text id='qlimit' class=numinputvalue  title='Set the max number of returned rows'
	        		style="font-size: small;font-family: Arial, Helvetica, sans-serif;" value='10'><hr>  
				</div>
			</div>
			<div id="formpane">
	
				<div id="taptab" class=querytab>
				  	<ul>
	        			<li><a href="#tapselect" title="Set up the SELECT clause of the query"><span>Select What</span></a></li>
	        			<li><a href="#tapwhere"  title="Set up the WHERE clause of the query"><span>Where</span></a></li>
	        			<li><a href="#taptext"   title="Current query on ADQL text"><span>Plain Text Query</span></a></li>
	        			<li><a href="#tapjob"    title="Acces to the jobs attached to the current session"><span>Job Control</span></a></li>
	    			</ul>
					<div id="tapselect" class=queryformtab >
	 					<div style="background-color: white ; width: 380px; height: 220px; vertical-align: middle; float:left;">
	 						<div style="background: white;">
	 							<span class=help>Available Keywords. Filter:</span>
	 							<input type=text  class=kw_filter style="width: 100; position: relative; bottom: 5;font-size: small; 
	 							font-family: Arial, Helvetica, sans-serif;" >	 							
	 						</div>
	        				<div id="tapselectmeta" class=kw_list></div>      
	        				<div style="background-color: white;">
	        					<span class=help>Drag and Drop keywords to the list of selected fields</span>
	        				</div>
	        					
	        			</div>
	 					<div style="background-color: white ; width: 480px; height: 125px; float:left;">
	  						<div style="background: white;">
	  							<span class=help>Selected Fields</span>
	  						</div>
	        				<div id="tapselectlist"  ></div>
	    				</div>
	 					<div style="background-color: white ; width: 480px; height: 60px; float:left;">
	  						<div style="background: white;">
	  							<span class=help>Order By Field</span>
	  						</div>
	        				<div id="taporderby"  ></div>
	    				</div>
	  				</div>
					<div id="tapwhere" class=queryformtab >
						<div style="background-color: white ; width: 340px; vertical-align: middle; float:left;">
	 						<div style="background: white;">
	 							<span class=help>Available Keywords. Filter:</span>
	 							<input type=text  class=kw_filter style="width: 100; position: relative; bottom: 5;font-size: small; 
	 							font-family: Arial, Helvetica, sans-serif;" >	 							
	 						</div>
	        				<div id="tapmeta" class=kw_list ></div>      
	        				<div style="background-color: white;">
	       						<span class=help>Drag and Drop keywords to the list of constraints</span>
	        				</div>
	        					
	        			</div>
	 					<div style="background-color: white ; width: 520px; float:left; margin-left: 15px;">
	  						<div style="background: white;">
	  							<div style="background: white;float:left;">
	  								
	   								<table border=0 style="border-spacing: 0px 0px;"">
										<tr>
	  										<td></td>  
	  										<td><span class=help>Drop Coord. Keywords</span></td>	  															
	  									</tr>
										<tr>
	  										<td><span>alpha</span></td>  
	  										<td><div id="tapalpha" style="float:left;"></div> </td>	  															
	  									</tr>
										<tr>
	  										<td><span>delta</span></td>  
	  										<td><div id="tapdelta" style="float:left;"></div> </td>	  															
	  									</tr>
	    							</table>
	  							</div>
	  							<div style="background: white;float:left;">  							
	    							
	  								<table border=0  style="border-spacing: 0px 0px;"">
	  									<tr>
	  										<td></td>	
	  										<td align=right colspan=2><span class=help>Type return or click to valid</span>
	  										
	  										</td>							
	  									</tr>
	  									<tr>
	    									<td align=right><span>Coord</span></td>								
	   										<td><input id=tapcoordval type=text class=coordinputvalue
	   										style="font-size: small;font-family: Arial, Helvetica, sans-serif;"></td>								
	    									<td><a class=sesame></a>
	    									<a title='Add the current positon to the query' id=acceptpattern class=add href="javascript:void(0);" 
	  										onclick='tapView.fireInputCoordEvent();' 
	  										title="click to add the position to the query"></a></td>							
	  									</tr>
	  									<tr>
	    									<td><span>Size/Radius</span> </td>								
	    									<td colspan=2>
	    									<input  id=tapradiusval value=0.1 type=text class=numinputvalue style="font-family: Arial, Helvetica, sans-serif;font-size: small;">
	    									<span class=help>deg</span>
	    									<input type=radio name=tapboxcircle value=Circle checked><span> Circle </span >  								
	    									<input type=radio name=tapboxcircle value=Box><span>Box</span>    
	    									</td>								
	  									</tr>
	  								</table>
	   							</div>
	   							<div style="background: white; float:left; width: 480px;">  							
	  								<span class=help>Constraints</span>
	        						<div id="tapconstraintlist" ></div>
	        						<span class=typomsg></span>
	        						
	        					</div>
	        				</div>
	    				</div>
					</div>
					<div id="taptext" class=queryformtab >	
						<textarea id=adqltext class="querytext"></textarea>
					</div>				
					<div id="tapjob">        
					 	<div style="background: white;">
	 						<span class=help>List of UWS jobs</span>
	 					</div>
	        			<div id="tapjobs" ></div>      							    	
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer"></div>	
</div>			
</body>
</Html>